import React, { Fragment } from 'react'
import { StyleSheet } from 'react-native'
import PropTypes from 'prop-types'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'
import { ScaleS, IS_IOS } from 'src/utils/ScreenUtil'
import isBoolean from 'lodash/isBoolean'

export default class PolyvLiveSkin extends React.PureComponent {
  constructor (props) {
    super(props)
    this.state = {
      showControl: false
    }
  }

  render () {
    const { showControl } = this.state
    const { showHeader, children, fullscreen, paused } = this.props
    if (showHeader) {
      return null
    }
    return (
      <CustomButton
        onPress={this.controlClick}
        throttleTime={300}
        style={[styles.container, StyleSheet.absoluteFillObject]}
      >
        {
          (!fullscreen || showControl || paused) && <CustomButton
            throttleTime={300}
            onPress={this.goback}
            style={styles.leftTopBtn}
          >
            <CustomImage
              source={require('@/imgC/live/btnBack_white.png')}
            />
          </CustomButton>
        }
        {(paused || showControl) && (
          <Fragment>
            {IS_IOS && <CustomButton
              throttleTime={300}
              onPress={this.pausedClick}
              style={styles.leftBottomBtn}
            >
              <CustomImage source={paused ? require('src/imgC/live/play_play.png') : require('src/imgC/live/play_pause.png')} />
            </CustomButton>}
            <CustomButton
              throttleTime={300}
              onPress={this.fullscreenClick}
              style={styles.rightBottomBtn}
            >
              <CustomImage
                source={fullscreen ? require('src/imgC/live/play_full.png') : require('src/imgC/live/play_small.png')}
              />
            </CustomButton>
          </Fragment>
        )}
        {children}
      </CustomButton>
    )
  }

  controlClick = showControl => {
    if (!isBoolean(showControl)) {
      showControl = !this.state.showControl
    }
    this.setState({
      showControl
    })
    this.showControlTimer && clearTimeout(this.showControlTimer)
    if (showControl) {
      // 控制层显示后  自动消失
      this.showControlTimer = setTimeout(() => {
        this.setState({
          showControl: false
        })
      }, 3000)
    }
  }

  pausedClick = (paused = !this.props.paused) => {
    this.props.PolyvLiveSkinPropsChange('paused', paused)
    this.controlClick(true)
  }

  fullscreenClick = (fullscreen = !this.props.fullscreen) => {
    this.props.PolyvLiveSkinPropsChange('fullscreen', fullscreen)
    this.controlClick(true)
  }

  showdanmuClick = (showdanmu = !this.props.showdanmu) => {
    this.props.PolyvLiveSkinPropsChange('showdanmu', showdanmu)
    this.controlClick(true)
  }

  goback = () => {
    if (this.props.fullscreen) {
      this.fullscreenClick()
    } else {
      this.props.goBack()
    }
  }
}

PolyvLiveSkin.propTypes = {
  children: PropTypes.node,
  showHeader: PropTypes.bool,
  paused: PropTypes.bool,
  fullscreen: PropTypes.bool,
  showdanmu: PropTypes.bool,
  PolyvLiveSkinPropsChange: PropTypes.func,
  goBack: PropTypes.func
}
const styles = StyleSheet.create({
  container: {
    backgroundColor: 'transparent',
    zIndex: 3
  },
  leftTopBtn: {
    position: 'absolute',
    left: 0,
    top: 0,
    height: ScaleS(44),
    width: ScaleS(60),
    justifyContent: 'center',
    alignItems: 'center'
  },
  leftBottomBtn: {
    position: 'absolute',
    left: 20,
    bottom: 0,
    height: ScaleS(30),
    width: ScaleS(40),
    justifyContent: 'center',
    alignItems: 'center'
  },
  rightBottomBtn: {
    position: 'absolute',
    right: 20,
    bottom: 0,
    height: ScaleS(30),
    width: ScaleS(40),
    justifyContent: 'center',
    alignItems: 'center'
  }
})
